<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LP | 政府引导基金</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <!-- 引入 Element Plus 的 CSS -->
    <link rel="stylesheet" href="./css/element-plus@2.3.10.css">
    <!-- 引入 Vue 3 的 JS -->
    <script src="./js/vue.global.js"></script>
    <!-- 引入 Element Plus 的 JS -->
    <script src="./js/element-plus@2.3.10.full.js"></script>
    <!-- 引入 alova -->
    <script src="./js/alova@2.1.2.umd.min.js"></script>
    <script src="./js/alova@2.1.2.globalfetch.umd.min.js"></script>
    <script src="./js/alova@2.1.2.vuehook.umd.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/api.js"></script>
    <style>
        .custom-radio-group {
            flex-wrap: nowrap;
        }
        .custom-checkbox-group {
            display: flex;
            flex-direction: row; 
        }
        .demo-tabs > .el-tabs__content {
            padding: 32px;
            background-color: #F5F4F1;
            color: #6b778c;
            font-size: 32px;
            font-weight: 600;
            height: calc(100vh - 200px); /* 视窗高度 - 头部高度 */
            overflow-y: auto;
        }

        .el-tabs--right .el-tabs__content,
        .el-tabs--left .el-tabs__content {
            height: 100%;
        }
        .el-header {
            --el-header-height: 30px;
            font-size: x-large;
            color: #606266;
        }
        .el-button-group {
            margin-bottom: 20px;
        }
        .search-box {
            .el-input {
                margin: 0 0 20px 20px;
                width: 300px
            }
        }
        .el-form {
            display: flex;
            flex-direction: row;
            align-content: space-between;
            flex-wrap: wrap;
        }
        .el-form-item {
            width: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="common-layout">
            <el-container>
                <el-header>LP、政府引导基金排名数据导出</el-header>
                <el-main>
                    <el-tabs  type="border-card" class="demo-tabs">
                        <el-tab-pane label="导出">
                            <div>
                                <el-form
                                    ref="ruleFormRef"
                                    style="width: 100%"
                                    :model="ruleForm"
                                    :rules="rules"
                                    label-width="100px"
                                >   
                                    <el-form-item label="类型" prop="type">
                                        <el-radio-group v-model="ruleForm.type" class="custom-radio-group" @change="changeTypeFunc">
                                            <el-radio label="LP" name="type" border>LP</el-radio>
                                            <el-radio label="GGF" name="type" border>政府引导基金</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="年份" prop="year">
                                        <el-date-picker
                                            v-model="ruleForm.year"
                                            type="year"
                                            aria-label="年份"
                                            placeholder="请选择年份"
                                            style="width: 100%"
                                            disabled
                                        />
                                    </el-form-item>
                                    <el-form-item :label="ruleForm.type === 'LP' ? 'LP' : '政府引导基金'" prop="entityIds">
                                        <el-select-v2
                                            v-model="ruleForm.entityIds"
                                            :options="basicList"
                                            filterable
                                            multiple
                                            :placeholder="`请选择${ruleForm.type === 'LP' ? 'LP' : '政府引导基金'}`"
                                            style="width: 240px"
                                        >
                                        </el-select-v2>
                                    </el-form-item>
                                    <el-form-item label="提交类型" prop="isSubmit">
                                        <el-radio-group v-model="ruleForm.isSubmit" class="custom-radio-group">
                                            <el-radio :label='1' border>已提交</el-radio>
                                            <el-radio :label='2' border>未提交</el-radio>
                                            <el-radio :label='3' border>全部</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="是否合并" prop="isMerge">
                                        <el-radio-group v-model="ruleForm.isMerge" class="custom-radio-group">
                                            <el-radio :label='1' border>不合并</el-radio>
                                            <el-radio :label='2' border>合并</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="时间范围" required>
                                        <el-form-item prop="start" style="width: 30%;">
                                            <el-date-picker
                                                v-model="ruleForm.start"
                                                type="date"
                                                aria-label="开始时间"
                                                placeholder="请选择开始时间"
                                                style="width: 100%"
                                                disabled
                                            />
                                        </el-form-item>
                                        <span style="margin: 0 20px;">-</span>
                                        <el-form-item prop="end">
                                            <el-date-picker
                                                v-model="ruleForm.end"
                                                type="date"
                                                aria-label="结束时间"
                                                placeholder="请选择结束时间"
                                                style="width: 100%"
                                                disabled
                                            />
                                        </el-form-item>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm(ruleFormRef)">
                                            导出数据
                                        </el-button>
                                        <el-button type="primary" @click="exportAllSubFundFunc(ruleFormRef)">
                                            导出【子基金、项目】数据（本年度全部）
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                            <div>
                                <el-table 
                                    :data="fileTableData" 
                                    height="350" 
                                    stripe 
                                    scrollbar-always-on
                                    border
                                    style="width: 100%" 
                                    empty-text="暂无数据" 
                                    v-loading="loading"
                                    element-loading-text="列表数据正在加载中..."
                                    :element-loading-spinner="svg"
                                    element-loading-svg-view-box="-10, -10, 50, 50"
                                    element-loading-background="rgba(122, 122, 122, 0.8)">
                                    <el-table-column prop="file_name" label="文件名称" min-width="200" align="center"></el-table-column>
                                    <el-table-column fixed="right" label="操作" width="220" align="center">
                                        <template #default="scope">
                                          <el-button link type="primary" size="small" @click="handlerDownload(scope.row)">
                                            下载
                                          </el-button>
                                          <!-- <el-button link type="primary" size="small">删除</el-button> -->
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="列表">
                            <div class="search-box">
                                <el-button-group>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(1)">刷新</el-button>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(1)">全部</el-button>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(2)">已提交</el-button>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(3)">未提交</el-button>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(4)">有操作</el-button>
                                    <el-button plain type="primary" @click="getLpGgfTableDataFunc(5)">未操作</el-button>
                                </el-button-group>
                                <el-input v-model="keyword" placeholder="请输入部门名称或联系人" clearable @change="getLpGgfTableDataFunc(1, true)"/>
                            </div>
                            <el-table 
                                :data="lpGgfTableData" 
                                height="550" 
                                stripe 
                                scrollbar-always-on
                                border
                                style="width: 100%" 
                                empty-text="暂无数据" 
                                v-loading="loading"
                                element-loading-text="列表数据正在加载中..."
                                :element-loading-spinner="svg"
                                element-loading-svg-view-box="-10, -10, 50, 50"
                                element-loading-background="rgba(122, 122, 122, 0.8)">
                                <el-table-column prop="index" label="序号" min-width="100" align="center">
                                    <template #default="props">
                                        {{ props.$index + 1 }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="调研类型" label="调研类型" min-width="200" sortable align="center"></el-table-column>
                                <el-table-column prop="部门名称" label="部门名称" min-width="400" align="center"></el-table-column>
                                <el-table-column prop="联系人" label="联系人" min-width="150" align="center"></el-table-column>
                                <el-table-column prop="是否提交" label="是否提交" min-width="150" align="center"></el-table-column>
                                <el-table-column prop="是否操作" label="是否操作" min-width="150" align="center"></el-table-column>
                                <el-table-column prop="提交时间" label="提交时间" min-width="200" sortable align="center"></el-table-column>
                            </el-table>
                        </el-tab-pane>
                    </el-tabs>
                </el-main>
                <el-footer></el-footer>
            </el-container>
        </div>
    </div>
    <script>
        const { createApp, ref, reactive, toRefs, onMounted, onUnmounted, getCurrentInstance } = Vue;
        const { FormInstance, FormRules, ElMessage } = 'element-plus'
    
        const app = createApp({
            setup() {
                const timestamp = Date.now();
                // 存储响应数据
                const loading = ref(false);
                const ruleFormRef = ref()
                const ruleForm = ref({
                    year: '2025',
                    start: '2024-04-01',
                    end: '2025-03-31',
                    type: 'LP',
                    isMerge: 1,
                    isSubmit: 1,
                    entityIds: [],
                })
                const rules = ref({
                    year: [{required: true, message: '请选择年份',trigger: 'change', },],
                    start: [{type: 'date', required: true, message: '请选择开始时间', trigger: 'change', },],
                    end: [{type: 'date', required: true, message: '请选择结束时间', trigger: 'change',},],
                    type: [{required: true, message: '请选择类型', trigger: 'change',},],
                    isMerge: [{required: true, message: '请选择是否合并', trigger: 'change',},],
                    isSubmit: [{required: true, message: '请选择提交类型', trigger: 'change',},],
                })
                const svg = `
                    <path class="path" d="
                    M 30 15
                    L 28 17
                    M 25.61 25.61
                    A 15 15, 0, 0, 1, 15 30
                    A 15 15, 0, 1, 1, 27.99 7.5
                    L 15 15
                    " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
                `
                // 设定10秒调用一次接口，刷新列表数据
                const fileTableData = ref([]);
                const countdown = ref(60); // 倒计时秒数
                let intervalId = ref(null);
                // 清理定时器
                onMounted(() => {
                    fetchData();
                    getEntityListFunc();
                    getLpGgfTableDataFunc(1);
                })
                onUnmounted(() => clearInterval(intervalId.value));
                const startPolling = () => {
                    intervalId.value = setInterval(() => {
                        if (countdown.value > 0) {
                            countdown.value--;
                        } else {
                            fetchData(); // 调用接口
                            countdown.value = 60; // 重置倒计时
                        }
                    }, 1000);
                };
                // 获取列表数据
                const fetchData = async () => {
                    const { send: getList } = alova.useRequest(
                        LpGgfApi.getList(),
                        { immediate: false }
                    );
                    loading.value = true;
                    let ret = await getList()
                    fileTableData.value = JSON.parse(ret);
                    loading.value = false;
                }
                // 启动轮询
                startPolling();
                // 下载
                const handlerDownload = async (row) => {
                    if (row.file_name) {
                        const { send: download } = alova.useRequest(
                            DownLoadFileAPI.download(row.file_name),
                            { immediate: false }
                        );
                        download();
                    }
                }
                // 导出数据
                const submitForm = async () => {
                    const { send: exportData } = alova.useRequest(
                        LpGgfApi.exportData(ruleForm.value),
                        { immediate: false }
                    );
                    try {
                        let v = await ruleFormRef.value.validate();
                        if (v === false) {
                            return;
                        }
                        loading.value = true;
                        console.log("表单数据：", ruleForm.value); 
                        exportData();
                        loading.value = false;
                        ElementPlus.ElMessage({
                            message: '数据正在导出，3分钟后请到列表下载！',
                            type: 'success',
                            plain: true,
                            showClose: true,
                            duration: 5000, 
                            showClose: true,
                        })
                    } catch (error) {
                        ElementPlus.ElMessage({
                            message: '数据验证未通过，请检查必填项！',
                            type: 'error',
                            plain: true,
                            showClose: true,
                        })
                    }
                };
                // 切换类型
                const basicList = ref([]);
                const changeTypeFunc = async (e) => {
                    getEntityListFunc()
                }
                // 获取实体列表
                const getEntityListFunc = async () => {
                    const { send: getEntityList } = alova.useRequest(
                        LpGgfApi.getEntityList({type: ruleForm.value.type, batch: ruleForm.value.year}),
                        { immediate: false }
                    );
                    let ret = await getEntityList()
                    basicList.value = JSON.parse(ret);
                }
                

                // 列表
                const lpGgfTableData = ref([]);
                const keyword = ref('');
                const getLpGgfTableDataFunc = async (type, flag) => {
                    if(flag===undefined){
                        flag = false;
                    }
                    let param = {
                        type: type
                    }
                    console.log('flag', flag);
                    
                    if(flag){
                        if(keyword.value.length > 1){         
                            param = {
                                ...param,
                                keyword: keyword.value,
                                type: 1,
                            }
                        }
                    }
                    console.log("type====", type);
                    const { send: getLpGgfTableData } = alova.useRequest(
                        LpGgfApi.getLpGgfTableData(param),
                        { immediate: false }
                    );
                    let ret = await getLpGgfTableData()
                    lpGgfTableData.value = JSON.parse(ret);
                }
                const exportAllSubFundFunc = async () => {
                    const { send: exportAllSubFund } = alova.useRequest(
                        LpGgfApi.exportAllSubFund({batch: ruleForm.value.year}),
                        { immediate: false }
                    );
                    exportAllSubFund();
                    ElementPlus.ElMessage({
                        message: '数据正在导出并加密中...，3分钟后请到列表下载！',
                        type: 'success',
                        plain: true,
                        showClose: true,
                        duration: 5000, 
                        showClose: true,
                    })
                }
                return {
                    fetchData,
                    loading,
                    ruleForm,
                    submitForm,
                    rules,
                    ruleFormRef,
                    fileTableData,
                    svg,
                    handlerDownload,
                    basicList,
                    changeTypeFunc,
                    lpGgfTableData,
                    getLpGgfTableDataFunc,
                    keyword,
                    exportAllSubFundFunc,
                };
            }
        });
        // 使用 Element Plus
        app.use(ElementPlus);
        // 挂载应用
        app.mount('#app');
    </script>
</body>
</html>